<!DOCTYPE html>
<!-- Reader -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/reader_bookinfo.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="js/JsBarcode.all.js"></script>
    <script type="text/javascript">
        //正则表达式
        function getQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
        function exit(){
            location.reload();
            $(".modal1").css("display","none");
            $(".modal2").css("display","none");
            $(".modal3").css("display","none");
            $(".modal4").css("display","none");
        }
        //预约书
        function reserve(){
            console.log("reserve");
            console.log(status);
            console.log(bookid);
            $.ajax({     //发送给服务器
                url : "/reserve",
                type : "post",
                data : {
                    "rname" : rname,
                    "phone" : phone,
                    "bookid" : bookid,
                    "status" : status
                },
                success : function(data){  //回调函数
                    if(data == "no1"){
                        $(".modal2").css("display","none");
                        $(".modal1 .container1 .dis1").html("Submit failed application！Because you have borrowed 3 books now!");
                        $(".modal1").css("display","block");
                    } else if(data == "yes1"){
                        $(".modal2").css("display","none");
                        $(".modal1 .container1 .dis1").html("Reserve successfully！Please submit borrow application to librarian within two hours. Otherwise, your reservation will expire.");
                        $(".modal1").css("display","block");
                    } else if(data == "no2"){
                        $(".modal2").css("display","none");
                        $(".modal1 .container1 .dis1").html("This book has been reserved by someone else!");
                        $(".modal1").css("display","block");
                    } else if(data == "yes2"){
                        $(".modal2").css("display","none");
                        $(".modal3").css("display","block");
                    }
                }
            })
        }
        //借书
        function borrow(){
            console.log("borrow");
            console.log(status);
            console.log(bookid);
            $.ajax({
                url : "/borrow",
                type : "post",
                data : {
                    "rname" : rname,
                    "phone" : phone,
                    "bookid" : bookid,
                    "status" : status
                },
                success : function(data){
                    if(data == "no1"){
                        $(".modal2").css("display","none");
                        $(".modal1 .container1 .dis1").html("Submit failed application！Because you have borrowed 3 books now!");
                        $(".modal1").css("display","block");
                    } else if(data == "yes1" || data == "yes2"){
                        $(".modal2").css("display","none");
                        $(".modal3").css("display","none");
                        $(".modal1 .container1 .dis1").html("Submit application successfully！Please wait for librarian review.");
                        $(".modal1").css("display","block");
                    }
                }
            })
        }

        // 还书
        function returnbook(){
            $.ajax({
                url : "/returnbook",
                type : "post",
                data : {
                    "rname" : rname,
                    "phone" : phone,
                    "bookid" : bookid,
                    "status" : status
                },
                success : function(data){
                    if(data == "yes"){
                        $(".modal4").css("display","none");
                        $(".modal1 .container1 .dis1").html("Submit application successfully！Please wait for librarian review.");
                        $(".modal1").css("display","block");
                    }else if(data == "no"){
                        $(".modal4").css("display","none");
                        $(".modal1 .container1 .dis1").html("You have submitted this application！Please wait for librarian review.");
                        $(".modal1").css("display","block");
                    }
                }
            })
        }
        var rname=getQueryString("name");
        var phone=getQueryString("phone");
        var book=getQueryString("bname");
        var author=getQueryString("author");
        var bookid;
        var status;
        $(function () {
            $("#name").html(rname);
            $(".readerhome").attr("href","/welcome?name=" + rname + "&phone="+phone);
            $.ajax({
                url : "/reader_search1",
                type : "post",
                data : {
                    "bname" : book,
                    "author" : author
                },
                success : function (data) {
                    console.log(data);
                    var t = "";
                    for (var i = 0; i < data.length; i++){
                        t += "<tr>" +
                            "<td>" + data[i].bname + "</td>" +
                            "<td>" + data[i].author + "</td>" +
                            "<td class='tiaoxingma'> <img class='code' style='width: 150px;height: 75px'><span style='display: none'>" + data[i].id + "</span></td>" +
                            "<td>" + data[i].situation + "</td>" +
                            "</tr>";
                    }
                    console.log(t);
                    $("#content").html(t);
                    for (var i = 0; i < data.length; i++){
                        console.log(data[i].id);
                        $(".code").eq(i).JsBarcode(data[i].id);
                    }
                    $("#content tr").bind("click", function(){
                        bookid = this.getElementsByTagName("span")[0].innerText;
                        status = this.getElementsByTagName("td")[3].innerText;
                        console.log(bookid);
                        console.log(status);
                        if(status == "not borrow"){
                            $(".modal2").css("display","block");
                        }else if(status == "reserved"){
                            reserve();
                        }else if(status == "borrowing"){
                            $.ajax({
                                url : "/borrowing",
                                type : "post",
                                data : {
                                    "rname" : rname,
                                    "phone" : phone,
                                    "bookid" : bookid,
                                    "status" : status
                                },
                                success : function(data){
                                    if(data == "no"){
                                        $(".modal1 .container1 .dis1").html("You cann't borrow or reserve this book right now!");
                                        $(".modal1").css("display", "block");
                                    } else{
                                        $(".modal1 .container1 .dis1").html("You have submitted your application,please wait for librarian review.");
                                        $(".modal1").css("display", "block");
                                    }
                                }
                            })
                        }else {
                            $.ajax({
                                url : "/borrowed",
                                type : "post",
                                data : {
                                    "rname" : rname,
                                    "phone" : phone,
                                    "bookid" : bookid,
                                    "status" : status
                                },
                                success : function(data){
                                    if(data == "no"){
                                        $(".modal1 .container1 .dis1").html("You cann't borrow or reserve this book right now!");
                                        $(".modal1").css("display", "block");
                                    } else{
                                        $(".modal4").css("display","block");
                                    }
                                }
                            })
                        }
                    })
                }
            })
        })
    </script>
</head>
<body>
    <div class="main">
        <header class="header clearfix">
            <i class="iconfont icon-yun"></i>
            <i>Library</i>
            <i class="iconfont icon-yonghu"></i>
            <i id="name"></i>
            <a href="/reader_searchbook(no)" class="logout">Logout</a>
            <a href="" class="readerhome">Reader Home</a>
        </header>
        <div class="table">
            <table class="result">
                <thead>
                    <!-- table row -->
                    <tr>
                        <th>Name</th>
                        <th>Author</th>
                        <th>ID</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="content">

                </tbody>
            </table>
        </div>
        <footer class="footer">
            <div class="mandarin">
                <img src="images/mandarin.png" alt="">
            </div>
            <p>Shan ICP number18018134 | Powered by 1713011</p>
        </footer>
        <div class="btn">
            <button class="Return" onclick="javascript:history.back(-1);">Return</button>
        </div>
    </div>
    <!-- borrow 和 reserve 提示 -->
    <!-- 出错提示 -->
    <div class="modal1">
        <div class="container1">
            <div class="dis1">
                You cann't borrow or reserve this book right now!
            </div>
            <div class="close1" onclick="exit()">
                 X
            </div>
        </div>
    </div>
    <!-- 借阅提示 -->
    <div class="modal2">
        <div class="container2">
            <div class="dis2">
                <p>Are  you  sure  to  borrow  the  book  right  now ?</p>
                <button id="reserve" onclick="reserve()">Reserve</button>
                <button id="borrow" onclick="borrow()">Yes</button>
            </div>
            <div class="close2" onclick="exit()">
                 X
            </div>
        </div>
    </div>

    <div class="modal3">
        <div class="container3">
            <div class="dis3">
                <p>You have reserved this book, do you want to borrow it?</p>
                <button id="yes" onclick="borrow()">Yes</button>
                <button id="no" onclick="exit()">No</button>
            </div>
            <div class="close3" onclick="exit()">
                 X
            </div>
        </div>
    </div>

    <div class="modal4">
        <div class="container4">
            <div class="dis4">
                <p>You have borrowed this book, do you want to return it?</p>
                <button id="returnbook" onclick="returnbook()">Yes</button>
                <button id="noreturn" onclick="exit()">No</button>
            </div>
            <div class="close4" onclick="exit()">
                 X
            </div>
        </div>
    </div>
</body>
</html>